import React, { Component } from 'react'
import { Icon } from 'antd'
import { Link } from 'react-router-dom'

import './index.scss';

export default class Header extends Component {
  constructor(props) {
    super(props)
    this.state = {
      activeIndex: props.activeIndex || 0
    }
  }
  componentDidMount() {

  }
  render() {
    const { activeIndex } = this.state
    return (
      <header className={['header', [1, 2, 3, 4, 5, 6].indexOf(activeIndex) !== -1 ? 'header-bg' : null].join(' ')}>
        <div className='inner'>
          <div className='line'>
            <Link to="/home"><h1 className='left'></h1></Link>
            <div className='right'>
              <Link to="/login" className='login'>登录</Link>
              <a href="" className='register'>注册</a>
              <span className='msg-wrap'>
                <i className='dot'></i>
                <Icon type="bell" className='icon icon-msg'/>
              </span>
            </div>
          </div>
        </div>
        <div className='inner'>
          <div className='line'>
            <nav>
              <Link to="/" className={activeIndex == 0 ? 'active' : null}>首页</Link>
              <Link to="/solution" className={activeIndex == 1 ? 'active-1' : null}>解决方案</Link>
              <Link to="/company-credit" className={activeIndex == 2 ? 'active-1' : null}>企业信用</Link>
              <Link to="/garden" className={activeIndex == 3 ? 'active-1' : null}>园区库</Link>
              <Link to="/conference" className={activeIndex == 4 ? 'active-1' : null}>协(商)会库</Link>
              <Link to="/investment-org" className={activeIndex == 5 ? 'active-1' : null}>投资机构库</Link>
              <Link to="/declaration" className={activeIndex == 6 ? 'active-1' : null}>专项申报</Link>
              <Link to="/activities" className={activeIndex == 7 ? 'active-1' : null}>资讯榜单</Link>
              <Link to="/about" className={activeIndex == 8 ? 'active-1' : null}>关于我们</Link>
            </nav>
          </div>
        </div>
      </header>
    )
  }
}